<template>
    <HalfModal
        :title="`选择${isSelf ? '自提' : '送达'}时间`"
        class="tech-reriew-select-days"
        :show="showSelect"
        :haveBorder="true"
        :mode="mode"
        :styleMode="styleMode"
        :theme="theme"
        @close="close"
    >
        <div class="day-list">
            <div class="day-item" :style="isSelect(item) ? fontColor : ''" v-for="item in dayList" :key="item.value" @click="() => selectItem(item)">
                <div class="day-text">{{item.text}}</div>
                <MiniIcon v-if="isSelect(item)" name="checked" :mode="mode" :styleMode="styleMode" :theme="theme"></MiniIcon>
            </div>
        </div>
    </HalfModal>
</template>

<script>
import { Popup } from 'vant';
import { MiniIcon } from '@components/base';
import { HalfModal } from '@components/shop';
import { createDaysList } from '@biztools/shopReview';

import ModeMixin from '@common/mixin';
import logger from '@common/logger';
export default {
    name: 'ReviewSelectDays', // 选择日期
    mixins: [ModeMixin],
    components: {
        Popup,
        MiniIcon,
        HalfModal,
    },
    props: {
        defaultValue: {
            type: Number,
            default: -1,
        },
        length: {
            type: Number,
            default: 0,
        },
        isSelf: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        isSelect() {
            return item => item.value === this.$props.defaultValue;
        },
    },
    data() {
        return {
            showSelect: false,
            dayList: [],
        };
    },
    created() {
        const { length } = this.$props;
        if (length > 0) {
            this.dayList = createDaysList(length + 1);
        }
    },
    methods: {
        show() {
            this.showSelect = true;
        },
        close() {
            this.showSelect = false;
        },
        selectItem(item) {
            logger.info('SelectDays => 选择的日期为：', item);
            this.$emit('ensure', item.value);
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-reriew-select-days {
    .day-list {
        height: 330px;
        overflow-y: auto;
        .day-item {
            height: 48px;
            .p-h(@shop-gap-md);
            .flex();
            justify-content: space-between;
            align-items: center;
            font-size: @font-size-md;
            color: @tip-color;
        }
    }
}
</style>
